<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
      <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="状态" placeholder="请选择">
            <el-select>
              <el-option label="启用" value="bbbb"></el-option>
              <el-option label="禁用" value="dddd"></el-option>
            </el-select>
          </el-form-item>
          <el-button>清除</el-button>
          <el-button type="primary">搜索</el-button>
        </el-form>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-button v-if="false" type="text" icon="el-icon-back">返回学科</el-button>
              <el-button type="success" icon="el-icon-edit" @click="showDialog=true">新增标签</el-button>
            </el-row>
          </el-col>
        </el-row>
    <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          show-icon
          :closable="false">
    </el-alert>
  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="80"
        >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期">
        <template slot-scope="scope">
        <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 1">已启用</span>
          <span v-else-if="scope.row.state === 0">已禁用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="operation"
        label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0">
            <el-button type="text" size="small">启用</el-button>
            <el-button type="text" size="small" @click="onUpdate(scope.row.id)">修改</el-button>
            <!-- <el-button type="text" :disabled="scope.row.state === 1" @click="editTags(scope.row)">修改</el-button> -->
            <el-button type="text" size="small" @click="onDel(scope.row.id)">删除</el-button>
          </span>
          <span v-else-if="scope.row.state === 1">
            <el-button type="text" size="small">禁用</el-button>
            <el-button type="text" size="small" disabled>修改</el-button>
            <el-button type="text" size="small" disabled>删除</el-button>

          </span>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <el-row type="flex" justify="end">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout=" prev, pager, next, sizes, jumper"
      background
      :total="20"
    >
    </el-pagination>
  </el-row>
  </el-card>
  <tags-add v-if="showDialog" ref="addPerRef" :visible="showDialog" @close="showDialog = false"></tags-add>
</div>
</template>

<script>
import { list as getTags, detail as getDetail } from '../../api/hmmm/tags'
// import { parseTime } from '../../filters/index'
import TagsAdd from '../components/tags-add.vue'
export default {
  components: {
    TagsAdd
  },
  data () {
    return {
      tableData: [{
        // id: 1,
        // subjectName: '前端',
        // tagName: 'h5',
        // creator: '超级管理员',
        // addDate: '2016-05-02',
        // state: '已启用'
      }],
      showDialog: false,
      alertText: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },

    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },

    async getListTags () {
      const { data: res } = await getTags()
      console.log(res)
      this.tableData = res.items
      this.total = res.counts
      this.alertText = `数据一共 ${this.total} 条记录`
      this.listLoading = false
    },
    // async onAdd (data) {
    //   this.showDialog = true
    //   await this.$nextTick()
    //   Object.assign(this.$refs.addPerRef.form, data)
    // },
    async onUpdate (id) {
      // 打开对话框
      const form = await getDetail(id)
      this.showDialog = true
      await this.$nextTick()
      // 数据回显
      this.$refs.addPerRef.form = form
    },
    onDel () {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.getListTags()
  }

}
</script>

<style scoped lang='less'>

</style>
